<template>
  <div>
    <!-- 导航栏 -->
    <nut-navbar @on-click-back="back" :rightShow="false" title="精选歌单"></nut-navbar>
    <!-- 无限加载主体 -->
    <div v-if="this.data" class="main">
      <nut-infiniteloading 
      @loadmore="onInfinite"
       :is-show-mod="true" 
    :has-more="true" 
    :is-loading="false" 
    :threshold="200"
      >
        <ul v-for="(item,index) in data" :key="index" class="songlist" @click="openlist(item.id)">
           <li><img :src="item.coverImgUrl" alt=""><p>{{item.name}}</p></li>
        </ul>
      </nut-infiniteloading>
    </div>
    <!-- 歌曲弹出层 -->
    <div v-if="this.songsdetail">
        <nut-popup position="bottom" :style="{ height: '80%' }" v-model="show" @close="show = false" :destroy-on-close="true">
      <nut-cell :is-link="true" :show-icon="true" v-for="item in this.songsdetail" :key="item.id">
        <span slot="title">{{item.name}}</span>
        <span slot="sub-title">原唱：{{item.ar[0].name}}</span> 
      </nut-cell>
    </nut-popup>
    </div>
    
  </div>
</template>
<script>
import { url, topplaylist,playlistdetail } from "../../api/api";
export default {
  data() {
    return {
      data: [],
      songsdetail:[],
      show:false,
    };
  },
  mounted(){
      this.gettopplaylist()
  },
  methods: {
      //  打开歌曲弹窗
      openlist(id){
          this.show = true
          this.getplaylistdetail(id)
      },
      //  获取歌单歌曲的详情
    getplaylistdetail(id) {
      this.$axios
        .get(url + playlistdetail, {
          params: {
            id: id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
                if(data.data.playlist.tracks.length>20){
                    data.data.playlist.tracks.length = 20
                }
              this.songsdetail = data.data.playlist.tracks;
            }
          },
          err => {
            this.$notify.danger(err.data.msg);
          }
        );
    },
         /* 网友精选歌单 */
    gettopplaylist() {
      this.$axios
        .get(`${url}${topplaylist}`, {
          params: {
            order: "new"
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
                this.data = data.data.playlists;
            }
          },
          err => {
            this.$notify.danger(err);
          }
        );
    },
    //  返回的回调函数
    back() {
      this.$router.go(-1);
    },
    //  无限加载
    onInfinite() {
      this.isLoading = true;
      this.timer = setTimeout(() => {
        if (this.page <= 5) {
          this.data = new Array(this.num * this.page);
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 100);
    },
    destroyed() {
        clearTimeout(this.timer);
    }
  }
};
</script>
<style scoped>
.nut-infiniteloading {
    display: flex;
    justify-content:center;
     flex-wrap:wrap;
}
.songlist {
    height: 100px;
}
.songlist li {
    width: 70px;
    height: 70px;
    margin: 0 5px 0 5px;
}
.songlist img {
    width: 70px;
    height: 70px;
    border-radius: 20px;
}
.songlist p {
    width:70px;
display: inline-block;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
</style>